<template>
  <div class="templateComtainer wp100">
    <div class="clear item vm">
      <div>
        <h5>
          <div class="vt">数据简报</div>
          <zm-form inline :model="form" ref="searchForm" size="small" class="vm mt20 fr clear">
            <zm-form-item label class="w180 mr10">
              <tree-select ref="treeSelect" :tree="tree" placeholder="部门" v-model="form.departmentIds" :tree-props="{ label: 'name', valueKey: 'id' }" :is-checkbox="true" out-class="w180" size="mini">
              </tree-select>
            </zm-form-item>
            <zm-form-item label class="w180 mr10">
              <zm-data-select v-model="form.userIds" :list="userOptions" placeholder="员工" label-name="name" value-key="id" collapse-tags multiple str class="w180" size="mini" @change="getUserInfo"></zm-data-select>
            </zm-form-item>
            <zm-form-item label class="w180 mr10">
              <zm-data-select v-model="form.customerIds" :list="customerOptions" placeholder="客户" label-name="customerName" value-key="id" collapse-tags multiple str class="w180" size="mini" @change="getDataInfo"></zm-data-select>
            </zm-form-item>
            <zm-form-item label class="mr10 vm">
              <zm-date-picker :start-date.sync="form.startTime" :end-date.sync="form.endTime" type="daterange" show-radio :default-choose-type="defaultChooseDateType" start-placeholder="开始日期" end-placeholder="结束日期" date-class="w220" range-separator="-" size="mini" :clearable="false" @change="getDataInfo" @on-change="getDataInfo">
              </zm-date-picker>
            </zm-form-item>
            <zm-form-item label class="vm">
              <zm-button @click="onDetail" type="primary">
                详情
              </zm-button>
            </zm-form-item>
          </zm-form>
        </h5>
      </div>
      <div class="clear margin-t60">
        <el-row :gutter="20" class="fs16 flex-wrap" type="flex">
          <el-col :span="6" v-for="(item, index) in dataList" :key="index" class="data-item" :class="index > 3 ? 'el-col' : ' el-col margin-t60'" align="center">
            <p class="data-item__name toe fb">{{ item.name }}</p>
            <div class="toe fc-blue h100 lh100 fontRem">
              <el-tooltip class="item" effect="dark" :content="item.value || '0'" placement="top-start">
                <template #content>
                  <span class="fs20">{{ item.value }}</span>
                </template>
                <span>{{ item.showValue }}</span>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <data-briefing-detail v-if="detailParams.visible" v-model="detailParams.visible" :params="detailParams.params"></data-briefing-detail>
  </div>
</template>

<script>
import datePickerMixin from '@/mixins/datePickerMixin'
import {
  getAuthAccountList
} from '@/api/src/publicSelect'
import { getListByDepartmentAndAccount } from '@/api/src/customer'
import zmDatePicker from '@/components/ZmDatePicker'
import { dataInfo } from '@/api/src/workbench'
import { getData } from '@/utils/date'
import treeSelect from '@/components/TreeSelect'
import DataBriefingDetail from './dataBriefingDetail'
import { getAccountByApartmentId } from '@/api/src/public'

export default {
  components: { zmDatePicker, treeSelect, DataBriefingDetail },
  mixins: [datePickerMixin],
  data () {
    return {
      form: {
        departmentIds: '',
        userIds: '',
        customerIds: '',
        startTime: getData('prve7Days'),
        endTime: getData('today')
      },
      tree: [],
      timeParentKey: 'form',
      defaultChooseDateType: ['prve7Days', 'prve14Days', 'prve30Days'],
      dataList: [
        {
          id: 'customerCount',
          value: '0',
          showId: 'customerCountShow',
          showValue: '0',
          name: '新建客户'
        },
        {
          id: 'orderCount',
          value: '0',
          showId: 'orderCountShow',
          showValue: '0',
          name: '销售单数量'
        },
        {
          id: 'saleTotalPrice',
          value: '0',
          showId: 'saleTotalPriceShow',
          showValue: '0',
          name: '销售总额（元）'
        },
        {
          id: 'actualSaleTotalPrice',
          value: '0',
          showId: 'actualSaleTotalPriceShow',
          showValue: '0',
          name: '实际应收（元）'
        },
        {
          id: 'refundTotalPrice',
          value: '0',
          showId: 'refundTotalPriceShow',
          showValue: '0',
          name: '退款金额（元）'
        },
        {
          id: 'payMoney',
          value: '0',
          showId: 'payMoneyShow',
          showValue: '0',
          name: '已回款总额（元）'
        },
        {
          id: 'residuePrice',
          value: '0',
          showId: 'residuePriceShow',
          showValue: '0',
          name: '剩余应收（元）'
        },
        {
          id: 'overduePrice',
          value: '0',
          showId: 'overduePriceShow',
          showValue: '0',
          name: '逾期金额（元）'
        }
      ],
      userOptions: [],
      customerOptions: [],
      detailParams: {
        visible: false,
        params: {}
      }
    }
  },
  watch: {
    'form.departmentIds' (val) {
      this.getUserInfo()
    }
  },
  created () {
    this.getDepart()
  },
  methods: {
    async getDepart () {
      this.tree = await getAuthAccountList()
      this.getUserInfo()
    },
    async getUserInfo () {
      this.userOptions = await getAccountByApartmentId({
        apartmentId: this.form.departmentIds
      })
      this.getCustomer()
    },

    async getCustomer () {
      this.customerOptions = await getListByDepartmentAndAccount({
        departmentIds: this.form.departmentIds,
        userIds: this.form.userIds
      })
      this.getDataInfo()
    },
    async getDataInfo (val) {
      if (val && val.dateType) {
        this.form.startTime = val.joinTime[0]
        this.form.endTime = val.joinTime[1]
      }

      const customerBool = this.form.customerIds instanceof Array
      const form = this.form
      if (customerBool) {
        form.customerIds = this.form.customerIds.join(',')
      }
      const _dataInfo = await dataInfo(form)
      this.dataList.map((item) => {
        item.value = _dataInfo[item.id]
        item.showValue = _dataInfo[item.showId]
      })
    },
    onDetail () {
      this.detailParams = {
        visible: true,
        params: this.form
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~styles/variables";
.margin-t60 {
  margin-top: rem(60px);
}
.templateComtainer {
  margin-right: 0.42rem;
}
.item {
  height: 31.6rem;
  vertical-align: top;
  background: #fff;
  margin: 0.57rem 0rem 0.57rem 0;
  padding: 0.1rem 0.82rem 0.82rem 0.82rem;
  .clear {
    clear: both;
  }
}
.data-item {
  font-size: rem(32px);
  &__name {
    font-size: rem(18px);
  }

  .fontRem {
    font-size: 1.23rem;
  }
}
/deep/.el-select {
  &__tags {
    .el-tag {
      width: 7.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
